1
00:00:00,720 --> 00:00:01,900
Hello and welcome.

2
00:00:01,950 --> 00:00:09,280
In this lecture we are going to create styling for our projet using C Ss.

3
00:00:11,120 --> 00:00:14,620
To save time I already did.

4
00:00:14,780 --> 00:00:20,680
The singer says styling are just run through them with you saw like one here.

5
00:00:20,720 --> 00:00:30,500
We are using style in his dear male selector and the propertys we have a to it is the font family with

6
00:00:30,590 --> 00:00:38,960
a value of sounds so if I'm going to add on other font because when creating fonts is always good idea

7
00:00:38,990 --> 00:00:46,050
to have more than one just in case the computer view in this page.

8
00:00:46,050 --> 00:00:50,310
Care as only got one font or hasn't got the other.

9
00:00:50,570 --> 00:00:57,170
So I forgot the main font and then I'm able to substitute font so the first one is not available.

10
00:00:57,320 --> 00:01:05,960
These second one will be used so most computers should have both or at least one of them noticed the

11
00:01:06,200 --> 00:01:13,190
way the select also starts so when you stylin you always have to have a select top which is the item

12
00:01:13,190 --> 00:01:14,260
he has selected.

13
00:01:14,510 --> 00:01:17,750
So Line 1 here the hasty mail is the selector.

14
00:01:17,810 --> 00:01:24,410
The actual hall heating element and then you have an opening curly braces and a closing.

15
00:01:24,410 --> 00:01:26,600
Curly braces in between the colibri.

16
00:01:26,610 --> 00:01:31,990
This is where you place the property which is on the left.

17
00:01:32,330 --> 00:01:33,620
Then call on.

18
00:01:33,800 --> 00:01:38,180
We separate the property from the value so the value is on the right.

19
00:01:38,180 --> 00:01:42,220
The properties on the left you must separate each of the.

20
00:01:42,230 --> 00:01:48,990
If your values are more than what you separate each one with a comma and then you end with a semicolon.

21
00:01:48,990 --> 00:01:50,130
Very important.

22
00:01:50,150 --> 00:01:51,190
The semicolon.

23
00:01:51,320 --> 00:01:52,790
She missed that out.

24
00:01:52,820 --> 00:01:54,910
It will not apply the styling.

25
00:01:55,110 --> 00:02:02,580
So this is the format that will be used throughout the document body.

26
00:02:02,620 --> 00:02:05,160
Again this is a body selector.

27
00:02:05,390 --> 00:02:08,460
Again this is the stylin of applied to it.

28
00:02:08,490 --> 00:02:11,060
We've given it a wave of 50 percent.

29
00:02:11,060 --> 00:02:18,250
50 percent means 50 percent of the parent contain a key.

30
00:02:18,290 --> 00:02:22,290
You can also use pixel values freedom on the use percentage.

31
00:02:22,340 --> 00:02:29,440
The maximum weight set a maximum week and the body to 800 pixels.

32
00:02:29,630 --> 00:02:34,350
A minimum of four hundred and eighty pixels.

33
00:02:36,000 --> 00:02:43,350
And the marjane outset the margin to zero and then all to automate it centres it around the other values

34
00:02:43,980 --> 00:02:46,200
line 12 is a class.

35
00:02:46,380 --> 00:02:51,450
There's a class called Last Resort which was defined in the hastier mail.

36
00:02:51,480 --> 00:02:58,020
These are live propertys and values then giving it a collage of white which you refer to the antrel

37
00:02:58,050 --> 00:03:05,160
Text and then padding seven pixels padding and refers to the space inside siby element.

38
00:03:05,170 --> 00:03:13,300
Go another class here online 19 called kesey's again carlaw white pad in seven pixels.

39
00:03:13,350 --> 00:03:20,090
That is how you write a comment in C Ss if you don't want an item to be disc to be used or if you want

40
00:03:20,080 --> 00:03:21,880
to test out things.

41
00:03:21,900 --> 00:03:23,850
This is how you input it is great.

42
00:03:23,940 --> 00:03:27,220
So the web browser will ignore that styling.

43
00:03:27,800 --> 00:03:30,890
Okay then we've got a button on line 26.

44
00:03:30,900 --> 00:03:39,060
The button is actually created using javascript to will create that button later using javascript but

45
00:03:39,060 --> 00:03:41,480
this is a styling for the button.

46
00:03:41,530 --> 00:03:48,660
Background colour are purple carlaw refers to a column inside the bottom the text column the width of

47
00:03:48,720 --> 00:03:57,360
the button 250 pixels the height 50 peaks pixels border radios is what gives the camel lie a rounded

48
00:03:57,390 --> 00:03:58,190
edge.

49
00:03:58,470 --> 00:04:02,720
I've said it to twenty five pixels.

50
00:04:02,850 --> 00:04:07,520
The font size refers for the size of the text inside the bottom.

51
00:04:07,810 --> 00:04:15,150
That's like thirty three line Thirty bordeaux's tar means I don't want any shadows around the borders

52
00:04:15,480 --> 00:04:15,750
line.

53
00:04:15,890 --> 00:04:24,250
35 is a margin from the top which means one 30 pig source to drop from the top.

54
00:04:24,250 --> 00:04:33,600
We want to create a space teti pixels from that top line tip to seven margin left means we are moving

55
00:04:34,200 --> 00:04:37,910
50 pixels from the left in the other direction.

56
00:04:38,280 --> 00:04:40,680
K that's what that does so let's call.

57
00:04:40,680 --> 00:04:43,370
We are now on line 39.

58
00:04:43,380 --> 00:04:50,850
We got an idea there called submit that would be the submit button.

59
00:04:52,050 --> 00:05:00,060
So the values are assigned to these sub made Heidi button on line 39 we've got bad Grunk carlaw.

60
00:05:00,360 --> 00:05:01,930
I've said that to yellow.

61
00:05:01,980 --> 00:05:08,130
We've got to call all of use hex values there 0 0 remains black.

62
00:05:08,280 --> 00:05:17,970
They would say that with the height by the radio font size border style margin and margin top margin

63
00:05:17,970 --> 00:05:26,120
left not going to good true leave margin because I've already explained that in our previous stylin.

64
00:05:26,130 --> 00:05:32,160
On the other on on this I have already explained it here so I'm not going to run through that again.

65
00:05:32,280 --> 00:05:34,350
Is the same thing in a way.

66
00:05:34,530 --> 00:05:35,410
Where are we now.

67
00:05:35,430 --> 00:05:37,590
Guess what I got an idea here.

68
00:05:37,620 --> 00:05:38,960
Guess field.

69
00:05:38,960 --> 00:05:44,590
So again the properties are similar to the properties we've used before and border here.

70
00:05:44,610 --> 00:05:46,710
Just supply the border.

71
00:05:46,890 --> 00:05:53,850
Maybe fig 5 pixels a fake solar panel is the one I wanted border to be unified.

72
00:05:53,850 --> 00:05:55,810
That is there's no breaks in between.

73
00:05:56,110 --> 00:06:03,500
And this is a Bodog call the kolok the border texta line will place any text on centre.

74
00:06:03,870 --> 00:06:06,760
Again this this is called guess.

75
00:06:06,790 --> 00:06:13,500
These are the properties of a sign to a property is what we've already explained.

76
00:06:13,510 --> 00:06:19,020
Again guess that a class called guess is again background colour property.

77
00:06:19,020 --> 00:06:21,610
We've got the main rup online 24/7.

78
00:06:21,640 --> 00:06:25,050
Again these are familiar properties.

79
00:06:25,050 --> 00:06:31,240
I've already explained why God hates one element which is ahead in time.

80
00:06:31,250 --> 00:06:34,370
Wish Chris the title for our game.

81
00:06:34,610 --> 00:06:38,170
Again these are the properties again familiar properties.

82
00:06:38,170 --> 00:06:46,430
We've already explained background or padding padding refers to this space inside and then go.

83
00:06:47,220 --> 00:06:47,850
And so on.

84
00:06:47,880 --> 00:06:57,010
Okay the 650 pixels paragraph tag could give an A font size of 20 pixels text a line to the centre.

85
00:06:57,010 --> 00:07:00,000
So basically that's your list darlin.

86
00:07:00,060 --> 00:07:07,470
There's any part of this csx you can understand please to let me know that a lot of the propertys values

87
00:07:07,530 --> 00:07:10,570
are repeat values and properties.

88
00:07:10,600 --> 00:07:17,800
All right so I just say that and we can see what our looks like.

89
00:07:18,240 --> 00:07:23,030
Okay so this is what the game looks like at the moment.

90
00:07:23,190 --> 00:07:25,710
Okay will be styling.

91
00:07:25,710 --> 00:07:27,720
So there's no functionality at the moment.

92
00:07:27,720 --> 00:07:33,050
You can't do enough in under my own because javascript has not been applied.

93
00:07:33,060 --> 00:07:34,580
So once we play you.

94
00:07:34,730 --> 00:07:37,960
A script then the game will be ready to go.

95
00:07:38,200 --> 00:07:40,960
So they're set for this lecture on the sets.

96
00:07:40,960 --> 00:07:42,070
Thanks for watching.

97
00:07:42,070 --> 00:07:43,220
Bye for now.